<template>
  <div class="handle-page">
    <h2>纠纷处理</h2>
    
    <!-- 输入框获取 disputeId -->
    <div class="input-container">
      <label for="disputeId">请输入纠纷ID:</label>
      <input v-model="disputeId" type="text" id="disputeId" placeholder="请输入纠纷ID" />
      <button @click="fetchDisputeData">查询</button>
    </div>

    <!-- 纠纷详情展示 -->
    <div v-if="disputeDetail" class="dispute-detail">
      <h3>纠纷详情</h3>
      <div class="detail-item">
        <strong>纠纷ID:</strong> {{ disputeDetail.dispute.disputeId }}
      </div>
      <div class="detail-item">
        <strong>订单ID:</strong> {{ disputeDetail.dispute.orderId }}
      </div>
      <div class="detail-item">
        <strong>发布者ID:</strong> {{ disputeDetail.dispute.publisherId }}
      </div>
      <div class="detail-item">
        <strong>接单者ID:</strong> {{ disputeDetail.dispute.accepterId }}
      </div>
      <div class="detail-item">
        <strong>判定结果:</strong> {{ disputeDetail.dispute.result }}
      </div>
     
      <div class="detail-item">
        <strong>解决时间:</strong> {{ formatDate(disputeDetail.dispute.resolvedAt) }}
      </div>
      <div class="detail-item">
        <strong>创建时间:</strong> {{ formatDate(disputeDetail.dispute.createdAt) }}
      </div>
    </div>

    

    <!-- 纠纷判定结果展示 -->
    <div v-if="disputeRule" class="dispute-rule">
      <h3>纠纷结果裁定</h3>
      <pre>{{ disputeRule }}</pre>
    </div>

    <div class="button-container">
      <!-- 跳转到 DecisionPage 页面按钮 -->
      <button @click="goToDecisionPage">跳转到裁定页面</button>
    
      <!-- 新增跳转到聊天历史查询页面按钮 -->
      <button @click="goToChatHistoryPage">跳转到纠纷聊天历史查询页面</button>
  </div>


  </div>

</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      disputeId: '', // 纠纷ID
      disputeDetail: null, // 纠纷详情
      chatHistory: [], // 纠纷聊天记录
      disputeRule: null, // 纠纷判定结果
    };
  },
  methods: {
    // 格式化日期时间
    formatDate(date) {
      const d = new Date(date);
      return `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')} ${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`;
    },

    // 获取纠纷数据
    async fetchDisputeData() {
      if (!this.disputeId) {
        alert('请输入有效的纠纷ID');
        return;
      }
      try {
       

        // 获取纠纷详情
        const disputeDetailResponse = await axios.get(`http://10.34.78.186:18080/disputes/detail`, {
          params: { disputeId: this.disputeId },
        });
        if (disputeDetailResponse.data.code === 200) {
          this.disputeDetail = disputeDetailResponse.data.data;
        } else {
          this.disputeDetail = null;
        }

        
      } catch (error) {
        console.error('获取数据失败:', error);
        //alert('数据加载失败，请稍后重试');
      }
    },

    // 跳转到 DecisionPage 页面
    goToDecisionPage() {
      this.$router.push('/decision');
    },

    // 新增的跳转到聊天历史查询页面的逻辑
    goToChatHistoryPage() {
      this.$router.push(`/chat-history`);
    }

  },
};
</script>

<style scoped>

.button-container {
  display: flex; /* 使用 flex 布局使按钮横排 */
  gap: 20px; /* 设置按钮之间的间距 */
  justify-content: center; /* 水平居中对齐按钮 */
  margin-top: 20px; /* 给按钮容器顶部加个间距 */
}


.handle-page {
  padding: 20px;
  font-family: Arial, sans-serif;
  background-color: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

h2 {
  font-size: 28px;
  margin-bottom: 20px;
  color: #007bff;
}

.input-container {
  margin-bottom: 20px;
}

input {
  padding: 10px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

button {
  padding: 10px 20px;
  border: none;
  background-color: #28a745;
  color: white;
  cursor: pointer;
  border-radius: 4px;
  font-size: 16px;
}

button:hover {
  background-color: #218838;
}

.dispute-detail, .chat-history, .dispute-rule {
  margin-bottom: 30px;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.detail-item {
  margin-bottom: 10px;
  font-size: 16px;
}

.detail-item strong {
  color: #007bff;
}

.chat-item {
  background-color: #f1f1f1;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.button-container {
  text-align: center;
}

pre {
  background-color: #f1f1f1;
  padding: 15px;
  border-radius: 4px;
  font-size: 14px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>
